// 通过 webpack-merge 插件 合并配置文件
// const merge = require ('webpack-merge');
//获取 webpack.common.js 文件
// const common = require ('./webpack.common.js');

//在 node.js下获取 获取路径
const path = require('path');

//引用本地 webpack 功能
const webpack = require('webpack');

//引用html-webpack-plugin 生成新的HTML模板
const HtmlWebpackPlugin = require('html-webpack-plugin');
//引用extract-text-webpack-plugin 把 CSS 分离成文件
const ExtractTextPlugin = require('extract-text-webpack-plugin');
//引用clean-webpack-plugin 打包前先清除dist文件夹
const CleanWebpackPlugin = require('clean-webpack-plugin');
//引用copy-webpack-plugin 将文件复制到指定文件夹下
const CopyWebpackPlugin = require('copy-webpack-plugin');

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  //定义打包入口
  entry: {
    main: './entry.js'
  },
  //定义输出
  output: {
    path: path.resolve(__dirname, 'dist'),
    //[name]对应的是 entry中的"app.bundle"
    filename: '[name].js'
  },
  plugins: [
    //重构首页模板
    new HtmlWebpackPlugin({
      //选择重构的模板
      template: './src/index.html',
      //可以对文件重命名
      // filename: 'indexxxxx.html',
      //不插入生成的 js 文件，只是单纯的生成一个 html 文件
      inject: true,
      minify: {
        collapseWhitespace: false //是否压缩
      },
      hash: false //是否添加 哈希 值
    }),
    // HMR 模块热替换
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    //重构CSS文件
    new ExtractTextPlugin('./index.css'),

    // new webpack.ProvidePlugin({
    //   $: './src/js/jquery-1.9.1.min.js',
    //   jQuery: 'jquery',
    //   'window.jQuery': 'jquery'
    // }),

    //抽离功能模块
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      chunks: ['main', 'AngularJs']
    })
  ],
  module: {
    rules: [
      //处理 html 文件
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              minimize: false
            }
          }
        ]
      },
      {
        test: /\.(scss|css)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              // loader: ['css-loader?sourceMap', 'sass-loader?sourceMap'],
              loader: 'css-loader',
              options: {
                minimize: false, //css压缩
                sourceMap: true
              }
            },
            {
              // loader: ['css-loader?sourceMap', 'sass-loader?sourceMap'],
              loader: 'sass-loader',
              options: {
                minimize: false, //css压缩
                sourceMap: true
              }
            }
          ]
        })
      },
      //处理 ES6 语法
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      //配置图片 用于开发环境
      {
        test: /\.(jpg|png|gif|jpeg|bmp)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'img/'
          }
        }
      },
      //配置字体图标 用于开发环境
      {
        test: /\.(woff|woff2|svg|ttf|eot)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/'
          }
        }
      }
    ]
  },
  //配置 webpack-dev-server 工作选项
  devServer: {
    contentBase: path.join(__dirname, 'localFiles'),
    port: 9660,
    open: false,
    hot: true
  },
  //使用 source-map 工具 可以定位错误代码
  devtool: 'source-map'
};
